import React, { FC, useState } from "react";
import { useRequest } from "ahooks";
import styles from "../../../assets/css/common.module.scss";
import ListSearch from "../../../components/ListSearch";
import useSearchQuestionData from "../../../hooks/useLoadSearchQuestionData.js";
import ListPage from "../../../components/ListPage.js";
import { updateQuestion, deleteQuestion } from "../../../services/question.js";
import {
  Typography,
  Empty,
  Table,
  Tag,
  Button,
  Space,
  Modal,
  message,
  Spin,
} from "antd";

const { confirm } = Modal;
const { Title } = Typography;
const Trash: FC = () => {
  // const [questionList, setQuestionList] = useState([
  //   {
  //     _id: "q3",
  //     title: "问卷3",
  //     isPublished: false,
  //     isStar: true,
  //     answerCount: 8,
  //     creatdAt: "2022-11-15",
  //   },
  //   {
  //     _id: "q5",
  //     title: "问卷5",
  //     isPublished: true,
  //     isStar: false,
  //     answerCount: 15,
  //     creatdAt: "2022-12-10",
  //   },
  //   {
  //     _id: "q7",
  //     title: "问卷7",
  //     isPublished: true,
  //     isStar: true,
  //     answerCount: 18,
  //     creatdAt: "2023-01-20",
  //   },
  // ]);
  const {
    loading,
    data = {},
    refresh,
  } = useSearchQuestionData({ isDeleted: true });
  const { list = [], total = 0 } = data;

  // 恢复
  async function recoverfn() {
    for await (const id of selectedIds) {
      await updateQuestion(id, { isDeleted: false });
    }
  }
  const { run: recover } = useRequest(recoverfn, {
    manual: true,
    debounceWait: 500, // 防抖
    onSuccess: () => {
      message.success("还原成功");
      refresh(); // 触发自动刷新列表
      setSelectedIds([]);
    },
  });
  // 彻底删除
  async function deletefn() {
    await deleteQuestion(selectedIds);
  }
  const { run: delQuestion } = useRequest(deletefn, {
    manual: true,
    onSuccess: () => {
      message.success("彻底删除完成！");
      refresh();
      setSelectedIds([]);
    },
  });

  const tableColumns = [
    {
      title: "标题",
      dataIndex: "title",
    },
    {
      title: "是否发布",
      dataIndex: "isPublished",
      render: (isPublished: boolean) => {
        return isPublished ? (
          <Tag color="green">已发布</Tag>
        ) : (
          <Tag>未发布</Tag>
        );
      },
    },
    {
      title: "答卷数量",
      dataIndex: "answerCount",
    },
    {
      title: "创建时间",
      dataIndex: "creatdAt",
    },
  ];
  const del = () => {
    confirm({
      title: "确认删除吗?",
      okText: "确认",
      cancelText: "取消",
      onOk: delQuestion,
    });
  };
  // 记录选择id
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const TableElem = (
    <>
      <div>
        <Space>
          <Button
            type="primary"
            disabled={selectedIds.length === 0}
            onClick={recover}
          >
            还原
          </Button>
          <Button danger disabled={selectedIds.length === 0} onClick={del}>
            彻底删除
          </Button>
        </Space>
      </div>
      <Table
        columns={tableColumns}
        dataSource={list}
        pagination={false}
        rowKey={(q: any) => q._id}
        rowSelection={{
          type: "checkbox",
          onChange: (selectedRowKeys) => {
            setSelectedIds(selectedRowKeys as string[]);
          },
        }}
      />
    </>
  );

  return (
    <>
      <div className={styles.box}>
        <div className={styles.header}>
          <Title level={3}>回收站♻️</Title>
          <ListSearch />
        </div>

        <div className={styles.container}>
          {loading && (
            <div style={{ textAlign: "center" }}>
              <Spin size="large" />
            </div>
          )}
          {!loading && list.length === 0 && (
            <Empty description="暂无删除数据" />
          )}
          {!loading && list.length > 0 && TableElem}
        </div>

        <div className={styles.footer}>
          <ListPage total={total} />
        </div>
      </div>
    </>
  );
};
export default Trash;
